<template>
	<view v-if="info">
		<view class="page-foot">
			<view class="flex-box actions_box tc fs30 col-normal">
				<view @tap.stop.tap="jumpToChat" :data-uid="info.user_id" class="flex-grow-1">在线聊</view>
				<view @tap.stop.prevent="bindPhoneCall" :data-tel="info.mobile" class="flex-grow-1">打电话</view>
				<view @tap.stop.tap="jumpToFollow" class="flex-grow-1">写跟进</view>
			</view>
		</view>
		<view class="container">
			<view class="clientsitem flex-box">
				<image :src="info.user.avatar" mode="aspectFill" class="icon_avatar"></image>
				<view class="pb20 flex-grow-1">
					<view class="fs34 pb15">{{ info.user.nickname }}</view>
					<text class="fs24 col89">以下为统计数据</text>
				</view>
			</view>
			<view class="fs34 fwb col10 pb20">活跃情况</view>
			<view class="fs30 col89 pb15">该客户活跃度超过<text class="col10">{{info.userprofile.activity_degree||0}}%</text>用户
			</view>
			<view class="fs30 col89 pb15">工作日线上看房时间：<text
					class="col10">{{info.userprofile.workday_viewhouse||'不限'}}</text></view>
			<view class="fs30 col89 pb40">节假日线上看房时间：<text
					class="col10">{{info.userprofile.holiday_viewhouse||'不限'}}</text></view>
			<view v-if="info.prefer_json_arr.length>0" class="fs34 fwb col10 pb20 line">客户偏好</view>
			<view class="fs30 col89 pb15" v-for="(item, index) in info.prefer_json_arr">{{item.name}}：<text
					class="col10">{{item.value}}</text></view>
			<view class="navbox flex-box flex-center">
				<view @tap="changeLineShow" :data-id="1" :class="'navitem ' + (line_show == 1 ? 'active' : '')">线上看房
				</view>
				<view @tap="changeLineShow" :data-id="2" :class="'navitem ' + (line_show == 2 ? 'active' : '')">线下看房
				</view>
			</view>
			<view>
				<view class="num_box fwb col10 flex-box flex-between">
					<view class="flex-grow-1">看房数量</view>
					<view @tap="changeDayType" :data-id="1" :class="'pl40 ' + (day_type == 1 ? 'active' : '')">14天
					</view>
					<view @tap="changeDayType" :data-id="2" :class="'pl40 ' + (day_type == 2 ? 'active' : '')">1个月
					</view>
					<view @tap="changeDayType" :data-id="3" :class="'pl40 ' + (day_type == 3 ? 'active' : '')">3个月
					</view>
					<view @tap="changeDayType" :data-id="4" :class="'pl40 ' + (day_type == 4 ? 'active' : '')">6个月
					</view>
				</view>
				<qiun-data-charts v-if="line_show==1" type="line" :opts="opts" :chartData="lineList1" />
				<qiun-data-charts v-if="line_show==2" type="line" :opts="opts" :chartData="lineList2" />
				<view class="pt40 col10 fwb">客户行为</view>
				<view class="fs24 col10 pt20">浏览商圈分析</view>
				<view class="tabel tc">
					<view class="flex-box item">
						<view>商圈</view>
						<view>浏览次数</view>
						<view>关注房源</view>
					</view>
					<template v-if="!is_all1">
						<view v-for="item in house_statistics_data" class="flex-box item">
							<view>{{item.name}}</view>
							<view>{{item.view_num||0}}</view>
							<view>{{item.collect_num||0}}</view>
						</view>
					</template>
					<template v-else>
						<view v-for="item in house_statistics_data_all" class="flex-box item">
							<view>{{item.name}}</view>
							<view>{{item.view_num||0}}</view>
							<view>{{item.collect_num||0}}</view>
						</view>
					</template>
					<view v-if="house_statistics_data_all.length>5" @tap="changeAll1" class="col-normal fs30 pt30">
						{{is_all1?'收起':'查看全部'}}</view>
				</view>
				<view class="fs24 col10 pt20">浏览户型分析</view>
				<view class="tabel tc">
					<view class="flex-box item">
						<view>商圈</view>
						<view>浏览次数</view>
						<view>关注房源</view>
					</view>
					<template v-if="!is_all2">
						<view v-for="item in room_statistics_data" class="flex-box item">
							<view>{{item.name}}</view>
							<view>{{item.view_num||0}}</view>
							<view>{{item.collect_num||0}}</view>
						</view>
					</template>
					<template v-else>
						<view v-for="item in room_statistics_data_all" class="flex-box item">
							<view>{{item.name}}</view>
							<view>{{item.view_num||0}}</view>
							<view>{{item.collect_num||0}}</view>
						</view>
					</template>
					<view v-if="room_statistics_data_all.length>5" @tap="changeAll2" class="col-normal fs30 pt30">
						{{is_all2?'收起':'查看全部'}}</view>
				</view>
				<view class="fs24 col10 ptb20">浏览价格分析</view>
				<qiun-data-charts type="line" :opts="opts" :chartData="lineList3" />
				<view class="fs24 col10 ptb20">浏览面积分析</view>
				<view class="bottomcanvas">
					<qiun-data-charts type="line" :opts="opts" :chartData="lineList4" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');

	export default {

		data() {
			return {
				id: 0,
				info: null,
				is_all1: false,
				is_all2: false,
				house_statistics_data: [],
				house_statistics_data_all: [],
				room_statistics_data: [],
				room_statistics_data_all: [],
				line_show: 1,
				day_type: 1, //多少天内的统计图：1=14天，2=30天（一个月）,3=90天（3个月），4=180天（6个月）
				lineList1: {},
				lineList2: {},
				lineList3: {},
				lineList4: {},
				opts: {
					enableScroll: true,
					itemCount: 5,
					fontSize: 9,
					fontColor: "#8c8c8c",
					dataLabel: false,
					dataPointShape: false,
					color: ["#0091FF", "#898989"],
					padding: [15, 15, 0, 5],
					extra: {
						line: {
							type: 'curve'
						}
					},
					series: {
						showSymbol: false,
					},
					xAxis: {
						disableGrid: true,
						calibration: true,
						fontSize: 7
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							axisLine: false,
						}]
					},
				}
			};
		},
		onLoad: function(options) {
			this.id = options.id || 0;
			this.initData();
			this.view_statistics();
			this.price_statistics();
			this.space_statistics();
			this.house_statistics();
			this.room_statistics();
		},
		methods: {
			jumpToFollow() {
				var can_house_state_arr = this.info.can_house_state_arr;
				uni.navigateTo({
					url: '/pages/member/follow_up/follow_up?id=' + this.id + "&can_house_state_arr=" + JSON
						.stringify(can_house_state_arr)
				})
			},
			// 拨打电话
			bindPhoneCall(e) {
				var tel = e.currentTarget.dataset.tel;
				functions.phoneCall({
					phoneNumber: tel //仅为示例，并非真实的电话号码
				});
			},
			jumpToChat(e) {
				var uid = e.currentTarget.dataset.uid || 0;
				var that = this;
				functions.checkLogin(function(ret) {
					if (ret) {
						functions.jumpToChat(uid);
					} else {
						functions.toast('请先登录');
					}
				});
			},
			changeLineShow(e) {
				this.line_show = e.currentTarget.dataset.id || 0;
			},
			changeDayType(e) {
				this.day_type = e.currentTarget.dataset.id || 0;
				this.view_statistics();
				this.price_statistics();
				this.space_statistics();
			},
			changeAll1(e) {
				this.is_all1 = !this.is_all1;
			},
			changeAll2(e) {
				this.is_all2 = !this.is_all2;
			},
			// 居室分析统计
			room_statistics: function() {
				var that = this;
				functions.getAjaxData(
					'/api/xiluhouse/Appoint/room_statistics_data', {
						appoint_log_id: this.id,
					},
					function(res) {
						that.room_statistics_data_all = res.data
						var room_statistics_data = [];
						var len = res.data.length > 5 ? 5 : res.data.length
						for (var i = 0; i < len; i++) {
							room_statistics_data.push(res.data[i]);
						}
						that.room_statistics_data = room_statistics_data
					}
				);
			},
			// 楼盘分析统计
			house_statistics: function() {
				var that = this;
				functions.getAjaxData(
					'/api/xiluhouse/Appoint/house_statistics_list', {
						appoint_log_id: this.id,
					},
					function(res) {
						var data = res.data.data;
						that.house_statistics_data_all = data
						var house_statistics_data = [];
						var len = data.length > 5 ? 5 : data.length;
						for (var i = 0; i < len; i++) {
							house_statistics_data.push(data[i]);
						}
						that.house_statistics_data = house_statistics_data
					}
				);
			},

			// 价格统计图
			space_statistics: function() {
				var that = this;
				functions.getAjaxData(
					'/api/xiluhouse/Appoint/space_statistics', {
						day_type: this.day_type,
						appoint_log_id: this.id,
					},
					function(res) {
						var list1 = {
							"categories": res.data.column,
							"series": [{
								"name": "最大面积",
								"data": res.data.series.view_count1,
							}, {
								"name": "最小面积",
								"data": res.data.series.view_count2,
							}]
						}
						that.lineList4 = JSON.parse(JSON.stringify(list1))
					}
				);
			},
			// 价格统计图
			price_statistics: function() {
				var that = this;
				functions.getAjaxData(
					'/api/xiluhouse/Appoint/price_statistics', {
						day_type: this.day_type,
						appoint_log_id: this.id,
					},
					function(res) {
						var list = {
							"categories": res.data.column,
							"series": [{
								"name": "均价",
								"data": res.data.series.view_count1,
							}]
						}
						that.lineList3 = JSON.parse(JSON.stringify(list))
					}
				);
			},
			// 看房数量统计图
			view_statistics: function() {
				var now_city = uni.getStorageSync('now_city') || '上海市';
				var that = this;
				functions.getAjaxData(
					'/api/xiluhouse/Appoint/view_statistics', {
						city: now_city,
						day_type: this.day_type,
						appoint_log_id: this.id,
					},
					function(res) {
						var list1 = {
							"categories": res.data.column,
							"series": [{
								"name": "线上看房数量",
								"data": res.data.series.view_count1,
							}, {
								"name": "本市平均线上看房",
								"data": res.data.series.view_count1_2,
							}]
						}
						that.lineList1 = JSON.parse(JSON.stringify(list1))
						var list2 = {
							"categories": res.data.column,
							"series": [{
								"name": "线下看房数量",
								"data": res.data.series.view_count2,
							}, {
								"name": "本市平均线下看房",
								"data": res.data.series.view_count2_2,
							}]
						}
						that.lineList2 = JSON.parse(JSON.stringify(list2))
					}
				);
			},
			// 获取所有可下拉刷新更新的数据
			initData: function() {
				var that = this;
				functions.getAjaxData(
					'/api/xiluhouse/Appoint/my_user_detail', {
						id: this.id
					},
					function(res) {
						that.info = res.data;

					}
				);
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import "/static/css/old_project.css";

	.bottomcanvas {
		padding-bottom: 100rpx;
	}

	.page-foot {
		box-shadow: 0px 4rpx 30rpx 0px rgba(184, 189, 202, 0.3);
	}

	.actions_box {
		height: 100rpx;

		view {
			border-right: 1rpx solid #F4F3F3;

			&:last-child {
				border: none;
			}
		}
	}

	.tabel {
		padding: 20rpx 0 40rpx;

		.item {
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 10rpx;

			view {
				flex: 1;
			}


			&:nth-of-type(2n-1) {
				background: #F6F7FA;
			}
		}
	}

	.num_box .active {
		color: var(--normal);
	}

	.navbox {
		height: 110rpx;
		line-height: 80rpx;
		border-top: 1rpx solid #F4F3F3;
		padding-bottom: 30rpx;
	}

	.navitem {
		font-size: 34rpx;
		color: #101010;
		padding: 0 50rpx;
	}

	.navitem.active {
		position: relative;
		font-weight: bold;
	}

	.navitem.active::after {
		content: "";
		display: block;
		width: 30rpx;
		height: 8rpx;
		background: #0091FF;
		box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(3, 103, 179, 0.3);
		border-radius: 7rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.line {
		width: 670rpx;
		height: auto;
		border-top: 1rpx solid #F4F3F3;
		padding-top: 40rpx;
	}

	.container {
		padding: 0 30rpx;
	}

	.clientsitem {
		padding: 30rpx 0;
	}

	.icon_avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.icon_tel3 {
		width: 25rpx;
		height: 25rpx;
		margin-left: 17rpx;
	}

	.budget {
		height: 50rpx;
		line-height: 50rpx;
	}
</style>
